<template>
  <div class="screeningSituation" id="operationSituation">
    <el-row :gutter="20">
      <el-col
        :span="8"
        :xs="24"
        style="margin-bottom: 6px"
        v-for="item in grid"
        :key="item.field"
      >
        <div class="grid-content">
          <div class="label">{{ item.label }}</div>
          <el-divider direction="vertical"></el-divider>
          <div class="value">{{ item.value }} (份)</div>
        </div>
      </el-col>
    </el-row>
    <el-form :model="ruleform" inline class="form">
      <el-form-item label="项目类型：">
        <el-select
          v-model="ruleform.projectName"
          placeholder="请选择"
          style="width: 200px"
          multiple
        >
          <el-option
            v-for="(item, index) in typeList"
            :key="index"
            :label="item.label"
            :value="item.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="项目点名称：">
        <!-- <el-cascader
          ref="projectPoint"
          v-model="ruleform.organName"
          :props="hosProps"
          filterable
        /> -->
        <el-select
          v-model="ruleform.organName"
          placeholder="请选择"
          style="width: 200px"
          multiple
          filterable
        >
          <el-option
            v-for="(item, index) in organNameList"
            :key="index"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="报告时间：">
        <el-date-picker
          v-model="reportTime"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
          style="width: 100%"
          @change="onDaterangeChange"
        />
      </el-form-item>
      <el-form-item label="年龄区间：">
        <div class="age">
          <el-select
            v-model="ruleform.ageScopeStart"
            placeholder="起始年龄"
            style="width: 120px"
          >
            <el-option
              v-for="(item, index) in 13"
              :key="index"
              :label="index * 10"
              :value="index * 10"
            />
          </el-select>
          -
          <el-select
            v-model="ruleform.ageScopeEnd"
            placeholder="结束年龄"
            style="width: 120px"
          >
            <el-option
              v-for="(item, index) in 13"
              :key="index"
              :label="index * 10"
              :value="index * 10"
            />
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="审查机构名称：">
        <el-cascader
          v-model="ruleform.auditOrganName"
          :props="auditProps"
          filterable
        />
        <!-- <el-input v-model="ruleform.auditOrganName" placeholder="请输入" /> -->
      </el-form-item>
      <el-form-item label="设备厂家名称：">
        <el-input v-model="ruleform.deviceName" placeholder="请输入" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search"
          ><el-icon style="margin-right: 6px"><Search /></el-icon>
          搜索</el-button
        >
        <el-button @click="reset"
          ><el-icon style="margin-right: 6px"><Refresh /></el-icon>
          重置</el-button
        >
        <el-button @click="onPrint">
          <img
            style="margin-right: 6px; width: 12px"
            src="@/images/daochu.png"
            alt=""
          />

          导出</el-button
        >
      </el-form-item>
    </el-form>
    <div class="title card">报告数量</div>
    <div class="card">
      <BarChart
        id="barChart1"
        :dataList="projectQties"
        title="报告数量-项目类型"
      />
    </div>
    <div class="card">
      <div class="sub-title">报告数量-项目点</div>
      <el-table
        :data="organProjectQties"
        :header-cell-style="{ backgroundColor: '#EEF6FF' }"
        stripe
        border
        :height="400"
      >
        <el-table-column label="序号" type="index" width="80" />
        <el-table-column prop="organName" label="项目点名称" align="center" />
        <el-table-column prop="projectName" label="项目类型" align="center" />
        <el-table-column prop="qty" label="报告份数" align="center" />
      </el-table>
    </div>
    <div class="title card">报告效率</div>
    <div class="card">
      <div class="sub-title">国家项目-审核通过率</div>
      <el-row :gutter="10">
        <el-col :span="6" :xs="24" class="pass">
          <div>
            <div>审核通过率: {{ getPassRate }}%</div>
            <div class="total">总计: {{ getPassTotal }}份</div>
          </div>
        </el-col>
        <el-col :span="18" :xs="24">
          <div class="chart">
            <PieChart
              id="pieChart4"
              :dataList="auditList"
              unit="份"
              :color="['#4480E9', '#87BE0D', '#5ECFFB', '#AFE0FF']"
              :isVisibleTotal="false"
            />
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="card">
      <div class="sub-title">
        审核工作量分布
        <el-tooltip
          :content="
            ruleform.auditOrganName.length
              ? '重詈搜索条件，可显示各机构已审核的报告数量'
              : '搜索条件为“审核机构”时，显示机构下各审核医生已审核的报告数量'
          "
          placement="right"
          effect="light"
        >
          <img
            src="@/images/info.png"
            style="width: 20px; height: 20px"
            alt=""
          />
        </el-tooltip>
      </div>
      <el-table
        :data="auditOrganProjectQties"
        :header-cell-style="{ backgroundColor: '#EEF6FF' }"
        stripe
        border
        :height="400"
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" width="80" />
        <el-table-column
          prop="auditOrganName"
          label="审核机构名称"
          align="center"
        />
        <el-table-column
          v-if="ruleform.auditOrganName.length"
          prop="auditDoctorName"
          label="审核医生姓名"
          align="center"
        />
        <el-table-column prop="projectName" label="项目类型" align="center" />
        <el-table-column prop="qty" label="已审核报告份数" align="center" />
      </el-table>
    </div>
    <div class="card">
      <div class="sub-title">非项目-报告有效率</div>
      <el-row :gutter="10">
        <el-col :span="6" :xs="24" class="pass">
          <div>
            <div>报告有效率: {{ getReportRate }}%</div>
            <div class="total">总计: {{ getReportTotal }}份</div>
          </div>
        </el-col>
        <el-col :span="18" :xs="24">
          <div class="chart">
            <PieChart
              id="pieChart5"
              :dataList="validList"
              unit="份"
              :color="['#4480E9', '#5ECFFB']"
              :isVisibleTotal="false"
            />
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="card">
      <div class="sub-title">
        报告工作量分布
        <el-tooltip
          :content="
            ruleform.deviceName
              ? '重詈搜索条件，可显示各设备厂家的有效报告数量'
              : '搜索条件为“设备厂家”时显示该厂家分析医生各自的报告数量'
          "
          placement="right"
          effect="light"
        >
          <img
            src="@/images/info.png"
            style="width: 20px; height: 20px"
            alt=""
          />
        </el-tooltip>
      </div>
      <el-table
        :data="deviceProjectQties"
        :header-cell-style="{ backgroundColor: '#EEF6FF' }"
        stripe
        border
        :height="300"
      >
        <el-table-column label="序号" type="index" width="80" />
        <el-table-column
          prop="deviceName"
          label="设备厂家名称"
          align="center"
        />
        <el-table-column
          v-if="ruleform.deviceName"
          prop="reportDoctorName"
          label="报告医生姓名"
          align="center"
        />
        <el-table-column prop="projectName" label="项目类型" align="center" />
        <el-table-column prop="qty" label="有效报告份数" align="center" />
      </el-table>
    </div>
    <div class="card">
      <div class="sub-title">无效原因分析</div>
      <el-table
        :data="invalidReasons"
        :header-cell-style="{ backgroundColor: '#EEF6FF' }"
        stripe
        border
        :height="300"
      >
        <el-table-column label="序号" type="index" width="80" />
        <el-table-column prop="invalidReason" label="无效原因" align="center" />
        <el-table-column prop="invalidQty" label="份数" align="center" />
        <el-table-column prop="invalidRatio" label="占比" align="center">
          <template #default="{ row }">
            {{ row.invalidRatio.toFixed(2) + "%" }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getSubIns, getSubInsAudit } from "@/apis/hospitalManagement";
import {
  getOverall,
  getProjectQty,
  getOrganProjectQty,
  getAuditQty,
  getAuditOrganProjectQty,
  getValidQty,
  getDeviceProjectQty,
  getInvalidReason,
  getUserOrganNameList,
} from "@/apis/reportStatistics";
import areaData from "@/utils/area_value";
import format from "@/utils/format";
import { ElMessage } from "element-plus";
import PieChart from "./pieChart";
import BarChart from "./bar";
import { htmlToPDF } from "@/utils/htmlToPdf.js";
import moment from "moment";

export default {
  components: { PieChart, BarChart },
  data() {
    let _this = this;
    return {
      fullscreenLoading: false,
      grid: [
        {
          label: "今日报告量",
          value: 0,
          field: "todayQty",
        },
        {
          label: "本月报告量",
          value: 0,
          field: "thisMonthQty",
        },
        {
          label: "本年报告量",
          value: 0,
          field: "thisYearQty",
        },
      ],
      reportTime: [
        moment().subtract(6, "days").format("YYYY-MM-DD"),
        moment().format("YYYY-MM-DD"),
      ],
      ruleform: {
        projectType: [],
        organName: [],
        auditOrganName: [],
        reportStartTime: moment().subtract(6, "days").format("YYYY-MM-DD"),
        reportEndTime: moment().format("YYYY-MM-DD"),
      },
      auditProps: {
        lazy: true,
        checkStrictly: true,
        multiple: true,
        label: "insname",
        value: "insname",
        lazyLoad(node, resolve) {
          _this.getAuditJunior(node, resolve);
        },
      },
      typeList: [
        {
          label: "心血管",
          value: "心血管",
        },
        {
          label: "脑卒中",
          value: "脑卒中",
        },
        {
          label: "脑卒中门诊",
          value: "脑卒中门诊",
        },
        {
          label: "村医",
          value: "村医",
        },
        {
          label: "慧医",
          value: "慧医",
        },
        {
          label: "筛查",
          value: "高济",
        },
        {
          label: "国药爱心",
          value: "国药爱心",
        },
        {
          label: "新疆百草堂",
          value: "新疆百草堂",
        },
        {
          label: "心血管研究院",
          value: "心血管研究院",
        },
      ],
      tableData: [],
      hosProps: {
        lazy: true,
        checkStrictly: true,
        multiple: true,
        label: "insname",
        value: "inscode",
        lazyLoad: (node, resolve) => {
          this.getJunior(node, resolve);
        },
      },
      projectQties: [],
      organProjectQties: [],
      auditList: [],
      auditOrganProjectQties: [],
      validList: [],
      deviceProjectQties: [],
      invalidReasons: [],
      organNameList: [],
    };
  },
  mounted() {
    this.getUserOrganName();
    this.getAllData();
  },
  computed: {
    getNumber() {
      let ageList = [];
      for (let index = 0; index < 13; index++) {
        ageList.push(index * 10);
      }
      return ageList;
    },
    getPassRate() {
      return this.auditList?.find((item) => item.name == "已审核")?.ratio || 0;
    },
    getPassTotal() {
      return this.auditList
        .map((item) => item.value)
        .reduce((acc, curr) => acc + curr, 0);
    },
    getReportRate() {
      return this.validList?.find((item) => item.name == "有效")?.ratio || 0;
    },
    getReportTotal() {
      return this.validList
        .map((item) => item.value)
        .reduce((acc, curr) => acc + curr, 0);
    },
  },
  methods: {
    getJunior(node, resolve) {
      let subins = "";
      if (node.value) {
        subins = node.value;
      }
      getSubIns({
        uname: this.$store.getters.name,
        inscode: this.$store.getters.inscode,
        subins: subins,
      }).then((res) => {
        if (res.code == 0) {
          if (res.data && res.data.length > 0) {
            resolve(res.data);
          } else {
            resolve([]);
          }
        } else {
          resolve([]);
        }
      });
    },
    getUserOrganName() {
      getUserOrganNameList({
        uname: this.$store.getters.name,
      }).then((result) => {
        this.organNameList = result.data;
      });
    },
    onPrint() {
      htmlToPDF("operationSituation", "运营情况看板");
    },
    getAuditJunior(node, resolve) {
      let subins = "";
      if (node.value) {
        subins = node.value;
      }
      getSubInsAudit({
        uname: this.$store.getters.name,
        inscode: this.$store.getters.inscode,
        subins: subins,
      }).then((res) => {
        if (res.code == 0) {
          if (res.data && res.data.length > 0) {
            resolve(res.data);
          } else {
            resolve([]);
          }
        } else {
          resolve([]);
        }
      });
    },
    getAllData() {
      const params = {
        ...this.ruleform,
        projectName: this.ruleform.projectName.join(","),
        organName: this.ruleform.organName.join(","),
        auditOrganName: this.ruleform.auditOrganName.join(","),
        uname: this.$store.getters.name,
      };
      Promise.all([
        this.getOverall({
          projectName: this.ruleform.projectName.join(","),
          organName: this.ruleform.organName.join(","),
          auditOrganName: this.ruleform.auditOrganName.join(","),
          uname: this.$store.getters.name,
        }),
        this.getProjectQty(params),
        this.getOrganProjectQty(params),
        this.getAuditQty(params),
        this.getAuditOrganProjectQty(params),
        this.getValidQty(params),
        this.getDeviceProjectQty(params),
        this.getInvalidReason(params),
      ]);
    },
    async getOverall(params) {
      const result = await getOverall({
        ...params,
      });
      this.grid.map((item) => {
        item.value = result.data[item.field];
      });
    },
    async getProjectQty(params) {
      const result = await getProjectQty({ ...params });
      this.projectQties = result.data.projectQties.map((item) => {
        return {
          ...item,
          value: item.qty,
          name: item.projectName,
        };
      });
    },
    async getOrganProjectQty(params) {
      const result = await getOrganProjectQty({ ...params });
      this.organProjectQties = result.data.organProjectQties;
    },
    async getAuditQty(params) {
      const result = await getAuditQty({ ...params });
      this.auditList = result.data?.audit.map((item) => {
        return {
          ...item,
          value: item.qty,
        };
      });
    },
    async getAuditOrganProjectQty(params) {
      const result = await getAuditOrganProjectQty({ ...params });
      this.auditOrganProjectQties =
        result.data[
          this.ruleform.auditOrganName.length
            ? "auditOrganDoctorProjectQties"
            : "auditOrganProjectQties"
        ];
    },
    async getValidQty(params) {
      const result = await getValidQty({ ...params });
      this.validList = result.data.valid.map((item) => {
        return {
          ...item,
          value: item.qty,
        };
      });
    },
    async getDeviceProjectQty(params) {
      const result = await getDeviceProjectQty({ ...params });
      this.deviceProjectQties =
        result.data[
          this.ruleform.deviceName
            ? "deviceDoctorProjectQties"
            : "deviceProjectQties"
        ];
    },
    async getInvalidReason(params) {
      const result = await getInvalidReason({ ...params });
      this.invalidReasons = result.data.invalidReasons;
    },

    // 搜索
    search() {
      this.getAllData();
    },
    // 重置
    reset() {
      Object.keys(this.ruleform).forEach((key) => {
        if (
          ["organName", "reportTime", "projectName", "auditOrganName"].includes(
            key
          )
        ) {
          this.ruleform[key] = [];
          this.reportTime = [];
        } else {
          this.ruleform[key] = "";
        }
      });
      this.getAllData();
    },
    onDaterangeChange(date) {
      if (date) {
        this.ruleform.reportStartTime = date[0];
        this.ruleform.reportEndTime = date[1];
      } else {
        this.ruleform.reportStartTime = "";
        this.ruleform.reportEndTime = "";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.screeningSituation {
  background-color: #eee;
  .grid-content {
    padding: 30px;
    background: #6ebee1;
    display: flex;
    align-items: center;
    border-radius: 6px;
    color: #fff;
    font-size: 20px;
  }
  .form {
    margin: 10px 0;
    background: #fff;
    padding: 20px 10px 10px 10px;
    border-radius: 6px;
  }
  .title {
    font-size: 18px;
    font-weight: 700;
  }
  .sub-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    img {
      margin-left: 6px;
    }
  }
  .card {
    background: #fff;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 10px;
  }
  .chart {
    width: 100%;
    height: 300px;
  }
  .pass {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    .total {
      font-size: 20px;
      font-weight: 500;
      margin-top: 10px;
    }
  }
}
</style>